html, body {
    margin: 0;
    padding: 0;

}

html {
    font-size: 10px;
    background-color: Black;
}

body {
    width: 70%;
    margin: 0 auto;
    color: white;
   
  }

header h1 {
text-align: center;
}

h1 {
    font-size: 5rem;
    color: #7FFFD4;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 1px 1px 3px;

}

h2 {
    font-size: 4rem;
    color: #7FFFD4;

}


h3 {
    font-size: 2.5rem;
    
}

h4 {
font-size: 2rem;}

p {
    font-size: 2rem;
    font-family: 'Open Sans Condensed', sans-serif;
}

navbar-collapse{
display: none;}
navbar-nav {display: none;}
nav {
    height: 50px;
    background-color: black;
    display: flex;
    margin-bottom: 55px;
    padding: 1%;
    width: 100%;
    
  }


  nav ul {
    padding: 0;
    display: flex;
    list-style-type: none;
    flex: 2;
    z-index: 2;
  }

  nav li {
      display: inline;
      text-align: center;
      flex: 1;
      line-height: 1.5;
      
  }

  nav a {
    display: inline-block;
    font-size: 2rem;
    text-decoration: none;
    cursor: pointer;
    color: #7FFFD4;
    font-family: 'Lato', sans-serif
  }

  .topnav a:hover {
      background-color:#7FFFD4;
      color: black;
      padding: 10px;
  }
  .icon {
      display: none;
  }
  main {
      width: 100%;
      
  }
  #intro {
      display: flex;
  }

#add_comment {
color: #7FFFD4;
text-decoration: none;
font-size: 3rem;
margin-bottom: 20px;
}

#add_comment:hover {
text-decoration: underline;}

.posted {
color: #7FFFD4;
font-size: 1.5rem;
}

.space-left {
	margin-left: 15px;
}

.space-bottom {
	margin-bottom: 50px;
}

.button-container {
display: inline-block;}

.login {
    background-color: #7FFFD4;
    width: 80px;
    height: 75px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 18px;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 50%;
}
#register-button {
margin-left: 100px;
}

.login:hover {
    background-color: black;
    color: #7FFFD4;
}

.h2-header {
font-size: 5rem;
}


footer {
    margin-top: 50px;
    background-color: black;
    border-top: 1px solid #7FFFD4;
    text-align: center;
   
}

.socialMedia {
    padding-top: 10px;
    padding-left: 20px;
}

.socialMedia a {
    padding-right: 20px;
}

.comment-size {
font-size: 40px;}

h4 {color:white;}



@media screen and (max-width: 1023px) {

    html {
        overflow-x: hidden;
        margin: 0;
       
    }
    h1 {
        font-size: 6rem;
        margin: 0 auto;
    }

    body {
        
        position: relative;
        width: 100%;
       
    }

    p {
        font-size: 2rem;
        font-weight: 500;
    }

    nav {
    
        width: auto;
        display: flex;
        
        
     }
     

     .topnav a {
        display: none;
    }
    
    
    .icon {
        float: right;
        display: block;
        font-size: 3.5rem;
        padding-right: 3rem;
        font-weight: 800;
        
      }

    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
          position: absolute;
          right: 0;
          top: 5;
          
        }
    .topnav.responsive {display: block;}
    .topnav.responsive  {
        margin-top: 58px;
        margin-right: 1rem;
    }
    .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
          background-color: black;
          height: 6rem;
          width: 18rem;
          margin-left: 80%;
          
        }

    .topnav a:hover {
        background-color:#7FFFD4;
        color: black;
        padding: 0;
        
    }
    
    #main-img {
        display: block;
        height: 30rem;
        width: 30rem;
        margin: 0 auto;
        transition: 1s;
    }

    
    #intro {
        display: block;
        
    }

	 .login {
        top: 160px;
        background-color: black;
        color: #7FFFD4;
        height: 40px;
	left: 50px;
       
    }

    #register {
      top: 15px;
    }


    .login:hover {
        background-color: #7FFFD4;
        color: black;
    }
}


  @media screen and (max-width: 767px) {
    .topvan {
        font-size: 3rem;
    }
    .topnav.responsive a {
        height: 5rem;
        width: 14rem;
    }
    
    #main-img {      
        height: 20rem;
        width: 20rem;   
    }
    
    .topnav.responsive  {
        margin-top: 54px;
    }
}